<template>
  <el-input ref="money" v-model="formatValue" :size="size" :class="{'error':errorType=== true}" v-bind="$props" validate-event maxlength="20" @blur="handleBlur" @focus="handleFocus">
    <template slot="append">
      <slot v-if="$slots.append" name="append" />
    </template>
  </el-input>
</template>
<script>
import { props } from './mixin'
export default {
  name: 'Ratio',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    ...props,
    size: {
      type: String,
      default: ''
    },
    value: {
      type: [Number, String],
      default: '',
      desc: '数值'
    },
    max: {
      type: [Number, String],
      default: ''
    }
  },
  data: () => {
    return {
      current: '',
      formatValue: '',
      errorType: false,
      unitVal: window.i18n.t('百分比'),
      recordList: []
    }
  },
  computed: {},
  watch: {
    value(value) {
      this.calcFormatValue(value)
    }
  },
  mounted() {
    this.calcFormatValue(this.value)
  },
  methods: {
    handleFocus() {
      // 获取焦点去掉千分位
      if (this.formatValue) {
        var x = this.formatValue.split(',')
        this.formatValue = parseFloat(x.join(''))
      }
    },
    handleBlur() {
      if (this.formatValue === '') {
        this.current = ''
      } else {
        let value = this.formatValue
        try {
          value = +this.formatValue.replace(/,/g, '')
        } catch {
          console.error()
        }
        if (isNaN(value)) {
          value = 0
        }
        if (value > 999000000000000) {
          this.error()
          this.errorType = true
          value = this.recordList.slice(-1)
          setTimeout(() => {
            this.errorType = false
          }, 1000)
          if (value && value.length > 0) {
            this.current = this.toFixed(+Number(value))
          } else {
            this.current = ''
          }
        } else {
          this.recordList.push(value)
          this.current = this.toFixed(+Number(value))
        }
        this.calcFormatValue(this.current)
      }
      this.emit()
    },
    // 金额过大错误提示
    error() {
      // 多个提示标签覆盖问题.
      setTimeout(() => {
        this.$message({
          message: this.$t('警告，比例不能大于等于千万亿！'),
          type: 'error',
          duration: 1000
        })
      })
    },
    calcFormatValue(v) {
      var value = v
      if (value > 999999999999999) {
        this.errorType = true
        this.error()
        value = this.recordList.slice(-1)
        setTimeout(() => {
          this.errorType = false
        }, 1000)
      }
      if (value === '' || value === null) {
        this.current = this.formatValue = ''
      } else {
        this.formatValue = this.decimalFormat(value)
      }
      if (this.max !== '' && this.max !== null) {
        if (value > this.max) {
          this.formatValue = this.max
          this.$emit('change', this.max)
        }
      }
    },
    decimalFormat(value) {
      var valueNum = Number(value)
      if (!isNaN(valueNum)) {
        return this.toFixed(valueNum)
      }
      // 强制保留4位小数
      return ''
    },
    toFixed(number) {
      return String(number).replace(/^(.*\..{6}).*$/, '$1')
    },
    emit() {
      this.$emit('input', this.current)
      this.$emit('change', this.current)
    }
  }
}
</script>
